<!--
 * @Descripttion:
 * @version:
 * @Editor: E-CHOOSEUS R&D
 * @LastEditors: E-CHOOSEUS R&D
-->
<template>
  <div class="BloodSupplyObserve">
    <div class="formTitle">
      <TableHeaderRow :columns="columns" />
    </div>
    <div
      v-for="(item, idx) in tableConf"
      :key="pageIndex + '_' + idx"
      class="formItem"
    >
      <div v-if="isShowDel(item)" class="del" @click="handleDel(item)">
        <i class="el-icon-circle-close"></i>
      </div>
      <div
        v-for="(item2, index2) in columnsLeaf"
        :key="pageIndex + '_' + index2"
        class="cell"
        :style="{
          width: item2.width,
          flexShrink: item2.width ? 0 : 1
        }"
      >
        <template v-if="item2.key === 'date'">
          <DatePicker
            v-model="item[item2.key]"
            class="txt-c"
            :class="errorClass(item)"
            select-interval
            value-format="timestamp"
            format="yyyy-MM-dd"
          />
        </template>
        <template v-else-if="item2.key === 'timePoint'">
          <DateSelection
            v-model="item[item2.key]"
            class="txt-c"
            :class="errorClass(item)"
            style="width: 100%; padding: 0; justify-content: center"
            value-format="HH:mm"
            :simple-op="true"
            :date-picker-show="false"
            :has-border="false"
            :display-num="!item[item2.key]"
            :need-time-icon="false"
            :noClear="true"
          />
        </template>
        <template v-else>
          <input
            v-model="item[item2.key]"
            class="inputBox txt-c"
            :class="errorClass(item)"
          />
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import { format } from 'date-fns'
import { cloneDeep } from 'lodash-unified'
import { computed, defineComponent, reactive, toRefs, watch } from 'vue'

import { Doc } from '@/api/doc'
import DateSelection from '@/components/DateSelection/indexV2.vue'
import DatePicker from '@/components/MyComp/DatePicker.vue'
import {
  getElementFnFromInstance,
  getStoreFromInstance
} from '@/utils/instance'
import TimePicker from '@/views/homeNew/components/TimePicker.vue'

import TableHeaderRow from './tableHeaderRow.vue'

export default defineComponent({
  name: 'BloodSupplyObserve',
  components: {
    DatePicker,
    TimePicker,
    DateSelection,
    TableHeaderRow
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    errorTime: {
      type: Array,
      default: () => []
    },
    pageIndex: {
      type: Number,
      default: 0
    }
  },
  emits: ['update'],
  setup(props, { emit }) {
    const state = reactive({
      tableConf: [],
      key: +new Date(),
      columns: [
        {
          key: 'date',
          label: '日期',
          width: '90px'
        },
        {
          key: 'timePoint',
          label: '时间',
          width: '80px'
        },
        {
          label: '患侧肢体',
          children: [
            {
              key: 'illSideColor',
              label: '颜色',
              width: '80px'
            },
            {
              key: 'illSideTemp',
              label: '皮温',
              width: '80px'
            },
            {
              key: 'illSideBloodFillTime',
              label: '毛细血管充盈时间',
              width: '80px'
            },
            {
              key: 'illSideSwell',
              label: '肿胀',
              width: '80px'
            }
          ]
        },
        {
          label: '健侧肢体',
          children: [
            {
              key: 'wellSideColor',
              label: '颜色',
              width: '80px'
            },
            {
              key: 'wellSideTemp',
              label: '皮温',
              width: '80px'
            },
            {
              key: 'wellSideBloodFillTime',
              label: '毛细血管充盈时间',
              width: '80px'
            },
            {
              key: 'wellSideSwell',
              label: '肿胀',
              width: '80px'
            }
          ]
        },
        {
          key: 'diseaseAndCare',
          label: '病情及护理'
        },
        {
          key: 'sign',
          label: '签名',
          width: '100px'
        }
      ],
      columnsLeaf: []
    })

    const store = getStoreFromInstance()
    const { $confirm, $message } = getElementFnFromInstance()

    const patCur = computed(() => store.getters.patCur)

    function initData() {
      state.tableConf = props.data
    }

    function getParams() {
      return state.tableConf
    }

    function moveFocus(e) {
      const node = document.getElementById(e)
      if (node) {
        node.focus()
      }
    }

    function errorClass(item) {
      if (!item.date || !item.timePoint) {
        return
      }
      const time = +new Date(
        format(item.date, 'yyyy-MM-dd') +
          ' ' +
          formatTimePoint(item.timePoint) +
          ':00'
      )
      if (props.errorTime.includes(time)) {
        return 'error'
      }
    }
    function formatTimePoint(time) {
      if (typeof time == 'number') {
        const date = new Date(time)
        return `${date.getHours()}:${date.getMinutes()}`
      } else {
        return time
      }
    }

    function isShowDel(item) {
      let res = false
      state.columnsLeaf.forEach(v => {
        if (item[v.key]) {
          res = true
        }
      })
      return res
    }

    function handleDel(item) {
      if (item.id) {
        $confirm('确认删除该条记录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            Doc.removeDocItem(item.id).then(() => {
              $message.success(`删除成功`)
              emit('update')
            })
          })
          .catch(() => {})
      } else {
        for (const key in item) {
          item[key] = ''
        }
      }
    }

    function getColumnsLeaf(list) {
      list.forEach(v => {
        if (v.children && v.children.length > 0) {
          getColumnsLeaf(v.children)
        } else {
          state.columnsLeaf.push(cloneDeep(v))
        }
      })
    }

    watch(
      () => props.data,
      () => {
        initData()
      },
      { immediate: true }
    )
    watch(
      () => props.errorTime,
      () => {
        state.key = +new Date()
      }
    )

    getColumnsLeaf(state.columns)

    return {
      ...toRefs(state),
      getParams,
      moveFocus,
      errorClass,
      isShowDel,
      handleDel
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';

.BloodSupplyObserve {
  position: relative;
  border: 1px solid #000;
  border-top: none;
  border-left: none;
  margin: 20px auto 0;

  .formTitle {
    border-left: 1px solid #000;
  }

  .formItem {
    display: flex;
    position: relative;
    border-top: 1px solid #000;

    .cell {
      height: 35px;
      width: 100%;
      padding: 0 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-left: 1px solid #000;
    }

    .del {
      position: absolute;
      top: 10px;
      right: 0;
      width: 15px;
      height: 15px;
      font-size: 15px;
      color: #f56c6c;
      display: none;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    &:hover {
      .del {
        display: flex;
      }
    }
  }

  .txt {
    &-c {
      text-align: center;
    }
  }

  .inputBox {
    border: none;
    background-color: rgba($color: #000, $alpha: 0%);
    outline: none;
    width: 100%;
  }

  ::v-deep .txt-c {
    text-align: center;

    .el-input__inner {
      text-align: center;
    }
  }
}

::v-deep {
  .el-date-editor {
    width: 100%;

    .el-input__inner {
      font-size: 14px;
    }

    .el-input__suffix {
      right: -8px;
      display: inline-block;

      .el-input__icon {
        line-height: 18px;
      }
    }
  }

  .error {
    color: #f56c6c;

    .el-input__inner {
      color: #f56c6c;
    }
  }

  .el-input.is-disabled .el-input__inner {
    background-color: #fff;
  }

  .DateSelV2.disabled {
    background-color: #fff;
    border-color: transparent;
    color: #000;
  }

  input:disabled {
    color: #000;
    background: #fff;
  }
}
</style>
